﻿<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml" lang="ch">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>首页</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico in the root directory -->
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/resources/favicon.ico}">
    <!-- CSS Library-->
    <link rel="stylesheet" th:href="@{/assets/css/preloader.css}">
    <link rel="stylesheet" th:href="@{/assets/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/slick.css}">
    <link rel="stylesheet" th:href="@{/assets/css/metisMenu.css}"/>
    <link rel="stylesheet" th:href="@{/assets/css/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/animate.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/fontAwesome5Pro.css}">
    <link rel="stylesheet" th:href="@{/assets/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/jquery.fancybox.min.css}">
    <link rel="stylesheet" th:href="@{/assets/css/default.css}">
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <script type="text/javascript" th:src="@{/static/layui/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    <script th:inline="javascript">
        var basePath = [[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]];
        var userid = [[${session.userid}]];
    </script>
</head>

<style>
 .fff{
        width:80px;
        height:30px;
        /*margin:3px;*/
        float:left;
    }
 .ff{
     float:left;
 }
 .ff2{
     float:left;
    }

 .p{
     display: block;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     width: 80%;
 }
 .p2{
     display: block;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     width: 90%;
 }
 .blogf{
     width:460px;
     /*height:30px;*/
     margin-left:70px;
     float:left;
 }
 div.ex
 {
     width:100%;
     /*padding:9px;*/
     border:5px solid gray;
     margin:0px;
 }
</style>


<body>

<!--等待-->
<div id="loading">
    <div id="loading-center">
        <div id="loading-center-absolute">
            <div class="object" id="first_object"></div>
            <div class="object" id="second_object"></div>
            <div class="object" id="third_object"></div>
        </div>
    </div>
</div>

<!-- head 头部 -->
<div id="head" th:include="common/header :: myheader"></div>

<!-- scroll up area start -->
<div class="scroll-up" id="scroll" style="display: none;">
    <a href="javascript:void(0);"><i class="fas fa-level-up-alt"></i></a>
</div>
<!-- scroll up area end -->

<!--轮播图-->
<main id="indexssss">

    <!-- 轮播图start -->
    <section class="slider__area p-relative">
        <div class="slider-active">
            <div class="single-slider slider__height d-flex align-items-center" data-background="assets/img/slider/slider-1.jpg">
                <div class="container">
                    <div class="row">
                        <div class="col-xl-6 col-lg-6 col-md-8 col-sm-10 col-12">
                            <div class="slider__content">
                                <h2 data-animation="fadeInUp" data-delay=".2s" style="color: white">欢迎来到我的家具店 <br> </h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- slider area end -->

    <!-- 三张展示图banner area start -->
    <div class="banner__area">
        <div class="container">
            <div class="banner__inner p-relative mt--95">
                <div class="row">
                    <div class="col-xl-4 col-lg-4 col-md-6">
                        <div class="banner__item mb-30 p-relative">
                            <div class="banner__thumb fix">
                                <a href="product-listing" class="w-img banner" style="position: relative">
                                    <h2 style="color: #fff;position:absolute;bottom: 10px;left:10px; font-weight: bold; z-index: 9999">Bed</h2>
                                    <img src="assets/img/shop/banner/banner-sm-1.jpg" alt="banner"></a>
                            </div>
                            <div class="banner__content p-absolute transition-3">
                                <h5><a href="product-listing"> <br> </a></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-6">
                        <div class="banner__item mb-30 p-relative">
                            <div class="banner__thumb fix">
                                <a href="product-listing" class="w-img" style="position: relative">
                                    <h2 style="color: #fff;position:absolute;bottom: 10px;left:10px; font-weight: bold; z-index: 9999">Desk</h2>
                                    <img src="assets/img/shop/banner/banner-sm-2.jpg" alt="banner"></a>
                            </div>
                            <div class="banner__content p-absolute transition-3">
                                <h5><a href="product-listing"><br> </a></h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-4 col-lg-4 col-md-6">
                        <div class="banner__item mb-30 p-relative">
                            <div class="banner__thumb fix">
                                <a href="product-listing" class="w-img" style="position: relative">
                                    <h2 style="color: #fff;position:absolute;bottom: 10px;left:10px; font-weight: bold; z-index: 9999">Chair</h2>
                                    <img src="assets/img/shop/banner/banner-sm-3.jpg" alt="banner"></a>
                            </div>
                            <div class="banner__content p-absolute transition-3">
                                <h5><a href="product-listing"> <br>  </a></h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- banner area end -->

    <!--&lt;!&ndash; product area start &ndash;&gt;-->
    <section class="product__area pt-60 pb-100">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="section__title-wrapper text-center mb-55">
                        <div class="section__title mb-10">
                            <h2>热门 家具</h2>
                        </div>
                        <div class="section__sub-title">
                            <!--<p>令人惊讶地注意到，哥特式字母现在看起来有些苍白！</p>-->
                            <div v-for="(category, index) in categoryList" :key="index">
                                <a @click="sendCategoryLabel(category)" :class="{active: clilckCategory === category}"
                                   style="cursor: pointer" class="fff">{{ category }}
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-for="commodity in indexData" :key="commodity.commid">
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 ff">
                    <div class="product__wrapper mb-60">
                        <div class="product__thumb">
                            <a :href="'/product-detail/'+commodity.commid" class="w-img">
                                <img v-bind:src="commodity.image" width="250%" height="300px">
                                <div v-for="imgs in commodity.otherimg" :key="imgs.id">
                                    <img class="product__thumb-2" v-bind:src="imgs" width="250%" height="300px">
                                </div>
                            </a>
<!--                            <div class="product__action transition-3">-->
<!--                                <a href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">-->
<!--                                    <i class="fal fa-heart"></i>-->
<!--                                </a>-->
<!--                                <a href="#" data-toggle="tooltip" data-placement="top" title="Compare">-->
<!--                                    <i class="fal fa-sliders-h"></i>-->
<!--                                </a>-->
<!--                                &lt;!&ndash; Button trigger modal &ndash;&gt;-->
<!--                                <a href="javascript:void(0);" data-toggle="modal" data-target="#productModalId">-->
<!--                                    <i class="fal fa-search"></i>-->
<!--                                </a>-->
<!--                            </div>-->
                        </div>
                        <div class="product__content p-relative">
                            <div class="product__content-inner">
                               <div class="p2">
                                   <h4><a :href="'/product-detail/'+commodity.commid">{{ commodity.commname }} </a></h4>
                               </div>
                                <!--<h5>{{ commodity.school }}</h5>-->
                                <div class="product__price transition-3">
                                    <span> ￥ {{ commodity.thinkmoney }}</span>
                                    <span class="old-price">￥ {{ commodity.orimoney }}</span>
                                </div>
                            </div>
                            <div class="add-cart p-absolute transition-3">
                                <a :href="'/product-detail/'+commodity.commid">--> 查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--查看更多-->
            <div class="mx-auto" style="width: 250px;">
                <!--<div class="col-xl-12">-->
                    <!--<div class="product__load-btn text-center mt-25">-->
                        <a href="product-listing" class="os-btn os-btn-3">Load More</a>
                    <!--</div>-->
                <!--</div>-->
            </div>
        </div>
    </section>

    <!-- 两个炫酷家具 -->
    <div class="banner__area-2 pb-60">
        <div class="container-fluid p-0">
            <div class="row no-gutters">
                <div class="col-xl-6 col-lg-6">
                    <div class="banner__item-2 banner-right p-relative mb-30 pr-15">
                        <div class="banner__thumb fix">
                            <a href="javascript:void(0);" class="w-img"><img src="assets/img/shop/banner/banner-big-1.jpg" alt="banner"></a>
                        </div>
                        <!--<div class="banner__content-2 p-absolute transition-3">-->
                            <!--<span>Products Essentials</span>-->
                            <!--<h4><a href="product-details.html">Bottle With Wooden Cork</a></h4>-->
                            <!--<p>Mirum est notare quam littera gothica, quam nunc putamus <br> parum claram, anteposuerit litterarum formas.</p>-->
                        <!--</div>-->
                    </div>
                </div>
                <div class="col-xl-6 col-lg-6">
                    <div class=" banner__item-2 banner-left p-relative mb-30 pl-15">
                        <div class="banner__thumb fix">
                            <a href="javascript:void(0);" class="w-img"><img src="assets/img/shop/banner/banner-big-2.jpg" alt="banner"></a>
                        </div>
                        <!--<div class="banner__content-2 banner__content-2-right p-absolute transition-3">-->
                            <!--<span>Products Furniture</span>-->
                            <!--<h4><a href="product-details.html">Hauteville Plywood Chair</a></h4>-->
                            <!--<p>Mirum est notare quam littera gothica, quam nunc putamus <br> parum claram, anteposuerit litterarum formas.</p>-->
                        <!--</div>-->
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- 最新销售 -->
    <section class="sale__area pb-100">
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="section__title-wrapper text-center mb-55">
                        <div class="section__title mb-10">
                            <h2>最新 家具</h2>
                        </div>
                        <div class="section__sub-title">
                            <p>Mirum est notare quam littera gothica quam nunc putamus parum claram!</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3" v-for="commodity in latestData" :key="commodity.commid">
                <div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 ff">
                    <div class="sale__item">
                        <div class="product__wrapper mb-60">
                            <div class="product__thumb">
                                <div class="product__thumb">
                                    <a :href="'/product-detail/'+commodity.commid" class="w-img">
                                        <img v-bind:src="commodity.image" alt="家具主图" style="height:300px">
                                        <div v-for="imgs in commodity.otherimg" :key="imgs.id"><img
                                                class="product__thumb-2" v-bind:src="imgs" style="height:300px"></div>
                                    </a>
<!--                                    <div class="product__action transition-3">-->
<!--                                        <a href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">-->
<!--                                            <i class="fal fa-heart"></i>-->
<!--                                        </a>-->
<!--                                        <a href="#" data-toggle="tooltip" data-placement="top" title="Compare">-->
<!--                                            <i class="fal fa-sliders-h"></i>-->
<!--                                        </a>-->
<!--                                        &lt;!&ndash; Button trigger modal &ndash;&gt;-->
<!--                                        <a href="#" data-toggle="modal" data-target="#productModalId">-->
<!--                                            <i class="fal fa-search"></i>-->
<!--                                        </a>-->
<!--                                    </div>-->
<!--                                    <div class="product__sale">-->
<!--                                        <span class="new">new</span>-->
<!--                                        <span class="percent">-16%</span>-->
<!--                                    </div>-->
                                </div>
<!--                                <div class="product__action transition-3">-->
<!--                                    <a href="#" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">-->
<!--                                        <i class="fal fa-heart"></i>-->
<!--                                    </a>-->
<!--                                    <a href="#" data-toggle="tooltip" data-placement="top" title="Compare">-->
<!--                                        <i class="fal fa-sliders-h"></i>-->
<!--                                    </a>-->
<!--                                    &lt;!&ndash; Button trigger modal &ndash;&gt;-->
<!--                                    <a href="#" data-toggle="modal" data-target="#productModalId">-->
<!--                                        <i class="fal fa-search"></i>-->
<!--                                    </a>-->

<!--                                </div>-->
<!--                                <div class="product__sale">-->
<!--                                    <span class="new">new</span>-->
<!--                                    <span class="percent">-16%</span>-->
<!--                                </div>-->
                            </div>
                            <div class="product__content p-relative">
                                <div class="product__content-inner">
                                    <div class="p2">
                                    <h4><a :href="'/product-detail/'+commodity.commid"> {{ commodity.commname }}</a>
                                    </h4>
                                    </div>
                                    <div class="product__price transition-3">
                                        <span>￥ {{ commodity.thinkmoney }}</span>
                                        <span class="old-price">￥ {{ commodity.orimoney }}</span>
                                    </div>
                                </div>
                                <div class="add-cart p-absolute transition-3">
                                    <a :href="'/product-detail/'+commodity.commid">--> 查看详情</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <!-- 便签-->

    <div class="container">
        <div class="mx-auto" style="width: 250px;">
            <a href="#"><img src="assets/img/client/client-1.jpg" alt="client"></a>
        </div>
    </div>



    <!--公告-->
    <section class="blog__area">
        <div class="row">
            <div class="col-xl-12">
                <div class="section__title-wrapper text-center mb-55">
                    <div class="section__title mb-10">
                        <h2>最新 公告</h2>
                    </div>
                    <div class="section__sub-title">
                        <p>Mirum est notare quam littera gothica quam nunc putamus parum claram!</p>
                    </div>
                </div>
            </div>

            <div v-for="news in newsData" :key="news.id" class="blogf ">
                <div class="blog__item mb-30">
                    <div class="blog__thumb fix">
                        <a @click="showNewsDetail(news.id)">
                            <img style="cursor: pointer" :src="news.image" width="500px;" height="350px;">
                        </a>
                        <div class="blog__content">
                            <h4><a href="#">{{news.newstitle}}</a></h4>
                            <div class="blog__meta">
                                <span>By <a href="#">网站管理员</a></span>
                                <span>/{{news.createtime}}</span>
                            </div>
                            <p class="p">{{news.newsdesc}}</p>
                            <a @click="showNewsDetail(news.id)" class="os-btn">read more</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--底部-->
    <div th:include="common/footer :: copyfooter"></div>

</main>


<!-- JS here -->
<script type="text/javascript" th:src="@{/assets/js/vendor/modernizr-3.5.0.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/vendor/jquery-3.5.1.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/vendor/waypoints.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/bootstrap.bundle.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/metisMenu.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/slick.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/jquery.fancybox.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/isotope.pkgd.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/owl.carousel.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/jquery-ui-slider-range.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/ajax-form.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/wow.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/imagesloaded.pkgd.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/js/main.js}"></script>
<style>.copyrights{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}</style>

<!-- Custom scripts-->
<script type="text/javascript" th:src="@{/static/js/main.js}"></script>
<script type="text/javascript" th:src="@{/static/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/static/js/common/index.js}"></script>
<script>
    layui.use(['form', 'layer','carousel'], function () {
        var form = layui.form;
        var $ = layui.jquery,
            layer = layui.layer;
        var carousel = layui.carousel;
        carousel.render({
            elem: '#test10'
            , width: '100%'
            , height: '815px'
            ,interval: 5000
        });
    });

    function tologin() {
        location.href = basePath + "/login";
    }
</script>
</body>
</html>
